/* :root {
    --bg1: #aea0a0;
} */
* {
  margin: 0%;
  padding: 0%;
}
html,
body {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.samllBox {
  padding: 10px;
  gap: 10px;
}
main {
  padding: 10px;
  gap: 10px;
  margin: 0% auto;
  width: 500px;
  height: 400px;
  display: flex;
}
main .bigBox {
  flex: 1;
  background-color: #aea0a0;
}
main::before {
  content: '';
}
#wrap {
  width: 100px;
  height: 100px;
  border-style: solid;
}
/* @images:'../img'
body {
    background: url("@{images}/cat.png");
} */
#column {
  width: 90px;
}
#group {
  width: 9%;
}
#waps::after {
  content: 'front';
}
.card {
  width: 100px;
  height: 100px;
}
.bigcard {
  width: 100px;
  height: 100px;
}
.bigbox2 {
  border: #aea0a0;
  box-shadow: 10px 50px 30px black;
}
.bigbox3 {
  border-color: transparent transparent transparent #999;
  border-style: solid;
  border: 50px;
}
#bogbox4 {
  height: 100px;
}
#bogbox5 {
  background: #444;
}
#main {
  border: solid #999 200px;
}
#main {
  box-shadow: 1px 4px 30px #444;
}
.border2 {
  border: 1px solid 2px;
  margin: 50px;
}
#main {
  border: 1px solid 2px !important;
  margin: 50px !important;
}
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
#main {
  box-shadow: inset 0 0 10px #555, 0 0 20px #222;
}
div {
  padding: 33px;
}
.animation,
#bigbox11 {
  transition: all 0.3s ease-out;
}
.animation .hide {
  transform: scale(0);
}
#bigbox21 {
  width: 200px;
}
#bigbox:after,
.bigbox32:after {
  content: 'less is good';
}
.bigbox32 {
  margin: 0%;
}
.boxing {
  color: #ff0000;
}
